<template>
  <div class="roleDetailInfo">
    <div class="info-content-tempt">
      <TitleContainer :spot="'角色分配详情-(所属角色：' + data.name + ')'" />
      <div class="content">
        <el-transfer
          filterable
          filter-placeholder="搜索角色"
          v-model="selectRoleValue"
          :data="allRoles"
          :titles="['未分配角色', '已分配角色']"
          @change="handleChange"
        >
          <el-tooltip
            slot-scope="{ option }"
            class="item"
            effect="dark"
            :content="option.label"
            placement="bottom"
          >
            <span style="font-size: 14px;">{{ option.label }}</span>
          </el-tooltip>
        </el-transfer>
      </div>
    </div>
    <div class="info-content-tempt">
      <TitleContainer :spot="'权限分配详情-(所属角色：' + data.name + ')'" />
      <div class="content">
        <el-transfer
          filterable
          filter-placeholder="搜索权限"
          v-model="selectPermissionValue"
          :data="allPermissions"
          :titles="['未分配权限', '已分配权限']"
          @change="handleChange"
        >
          <el-tooltip
            slot-scope="{ option }"
            class="item"
            effect="dark"
            :content="option.label"
            placement="bottom"
          >
            <span style="font-size: 14px;">{{ option.label }}</span>
          </el-tooltip>
        </el-transfer>
      </div>
    </div>
    <div class="info-content-tempt">
      <TitleContainer :spot="'路径分配详情-(所属角色：' + data.name + ')'" />
      <div class="content">
        <el-transfer
          filterable
          filter-placeholder="搜索路径"
          v-model="selectRouteValue"
          :data="allRoutes"
          :titles="['未分配路径', '已分配路径']"
          @change="handleChange"
        >
          <el-tooltip
            slot-scope="{ option }"
            class="item"
            effect="dark"
            :content="option.label"
            placement="bottom"
          >
            <span style="font-size: 14px;">{{ option.label }}</span>
          </el-tooltip>
        </el-transfer>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
// 具体用法查看官方API:https://github.com/kaorun343/vue-property-decorator
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import TitleContainer from '@/components/title/TitleContainer.vue'
import { roleAssign, roleRevoke } from '@/api/system/role'
import { MessageBox } from 'element-ui'
import { cloneDeep } from 'lodash'
@Component({
  name: 'roleDetailInfo',
  components: {
    //引用的组件在这里声明
    TitleContainer
  }
})
export default class extends Vue {
  @Prop({
    default: () => {
      return {
        selected_routes: []
      }
    }
  })
  private data!: any
  private selectRoleValue: any[] = []
  private selectRouteValue: any[] = []
  private selectPermissionValue: any[] = []
  // @Prop({ required: true }) private propExp2?: boolean
  get id() {
    return this.data.id
  }
  get allRoles() {
    if (this.data.selected_routes) {
      let tempAllRoles: any[] = []
      this.data.unselected_roles.forEach((item: any) => {
        tempAllRoles.push({
          key: item.id,
          label: item.name
        })
      })
      this.data.selected_roles.forEach((item: any) => {
        tempAllRoles.push({
          key: item.id,
          label: item.name
        })
      })
      return tempAllRoles
    } else {
      return []
    }
  }
  get allRoutes() {
    if (this.data.selected_routes) {
      let tempAllRoutes: any[] = []
      this.data.unselected_routes.forEach((item: any) => {
        tempAllRoutes.push({
          key: item.id,
          label: item.remark ? `(${item.remark})-${item.name}` : item.name
        })
      })
      this.data.selected_routes.forEach((item: any) => {
        tempAllRoutes.push({
          key: item.id,
          label: item.remark ? `(${item.remark})-${item.name}` : item.name
        })
      })
      return tempAllRoutes
    } else {
      return []
    }
  }
  get allPermissions() {
    if (this.data.selected_routes) {
      let tempAllPermissions: any[] = []
      this.data.unselected_permissions.forEach((item: any) => {
        tempAllPermissions.push({
          key: item.id,
          label: item.name
        })
      })
      this.data.selected_permissions.forEach((item: any) => {
        tempAllPermissions.push({
          key: item.id,
          label: item.name
        })
      })
      return tempAllPermissions
    } else {
      return []
    }
  }
  // 检测是否含有data
  @Watch('data')
  private ondataChange(value: boolean) {
    if (this.data && this.data.selected_roles) {
      let tempSelectedRoles: any[] = []
      this.data.selected_roles.forEach((item: any) => {
        tempSelectedRoles.push(item.id)
      })
      this.selectRoleValue = tempSelectedRoles
    }
    if (this.data && this.data.selected_routes) {
      let tempSelectedRoutes: any[] = []
      this.data.selected_routes.forEach((item: any) => {
        tempSelectedRoutes.push(item.id)
      })
      this.selectRouteValue = tempSelectedRoutes
    }
    if (this.data && this.data.selected_permissions) {
      let tempSelectedPermissions: any[] = []
      this.data.selected_permissions.forEach((item: any) => {
        tempSelectedPermissions.push(item.id)
      })
      this.selectPermissionValue = tempSelectedPermissions
    }
  }
  private handleChange(value: any, direction: any, movedKeys: any) {
    // 添加
    if (direction === 'right') {
      this.assign(movedKeys)
    } else {
      this.revoke(movedKeys)
    }
  }
  private async assign(item_ids: any) {
    try {
      const { data } = await roleAssign({
        id: this.id,
        item_ids: item_ids
      })
      this.$notify({
        title: '成功',
        message: '分配成功',
        type: 'success',
        duration: 2000
      })
    } catch (error) {
      console.error(error)
    } finally {
      // this.$emit('getInfo')
    }
  }
  private async revoke(item_ids: any) {
    try {
      const { data } = await roleRevoke({
        id: this.id,
        item_ids: item_ids
      })
      this.$notify({
        title: '成功',
        message: '回收成功',
        type: 'success',
        duration: 2000
      })
    } catch (error) {
      console.error(error)
    } finally {
      // this.$emit('getInfo')
    }
  }
  created() {
    // 最早可以调用vue组件method的钩子s
  }
  mounted() {
    //mounted 钩子
  }
}
</script>

<style lang="scss" scoped>
.roleDetailInfo {
  padding: 20px;
  .info-content-tempt {
    padding-bottom: 20px;
    position: relative;
    &:nth-of-type(n + 2) {
      margin-top: 20px;
    }
    &::after {
      content: '';
      width: 100%;
      position: absolute;
      bottom: 0;
      border-bottom: 1px solid $menuText;
    }
    &:last-of-type {
      &::after {
        content: '';
        width: 100%;
        position: absolute;
        bottom: 0;
        border-bottom: 0;
      }
    }
    .content {
      display: flex;
      flex-flow: column;
      align-content: flex-start;
      margin-top: 30px;
      .item {
        margin-bottom: 25px;
        font-size: 16px;
        .clickable {
          cursor: pointer;
          color: $clickableBlue;
        }
        .clickable-warning {
          cursor: pointer;
          color: $pink;
          margin-left: 20px;
        }
      }
      .key-block {
        display: block;
        margin-bottom: 10px;
        height: 20px;
        &:last-of-type {
          margin-bottom: 0;
        }
      }
    }
  }
}
</style>
